<html>

<head>
    <title></title>
    <style type="text/css">
        body {
            background-image: url(...(line truncated)...
        }
    </style>
    <link rel="stylesheet" type="text/css" href="tautocomplete.css" />
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="tautocomplete.js" type="text/javascript"></script>
    <script>
        $(document).ready(function () {
            var text2 = $("#Text2").tautocomplete({
                width: "500px",
                // columns: ['Country', 'Code', 'Capital'],
                columns: [{
                    code: 'code',
                    name: '编码',
                    isShow: false
                },{
                    code: 'country',
                    name: '城市',
                    isShow: true
                }, {
                    code: 'capital',
                    name: '首都',
                    isShow: true
                }],
                data: function (callback) {
                    var filterData = [];
                    var searchData = eval("/" + text2.searchdata() + "/gi");
                    $.ajax({
                        url: 'data.json',
                        type: 'get',
                        success: function (data) {
                            $.each(data, function (i, v) {
                                if (v.country.search(new RegExp(searchData)) !=
                                    -1) {
                                    filterData.push(v);
                                }
                            });
                            callback(filterData);
                        }
                    });
                },
                onchange: function () {
                    $("#ta-txt").html(text2.text());
                    $("#ta-id").html(text2.id());
                }
            }, function (data) {
                console.log(data);
                $('#ta-chose').text(JSON.stringify(data));
            });
        });
    </script>
</head>

<body>
    <br />
    <br />
    <br />
    <br />
    <br />
    <div style="width: 100%; text-align:center;">
        <input type="text" id="Text2" style="width: 200px; font-size:1.2em;" />
        <br />
        <br />chose:
        <span id="ta-chose"></span>
    </div>
</body>

</html>